<template>
    <a-row :gutter="24">
        <a-col :md="24">
            <a-card :style="cardStyle" :bordered="false">
                <!-- 查询区域 -->
                <div class="table-page-search-wrapper">
                    <!-- 搜索区域 -->
                    <a-form layout="inline" @keyup.enter.native="searchQuery">
                        <a-row :gutter="24">
                            <a-col :md="6" :sm="24">
                                <a-form-item label="单据编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                    <a-input placeholder="请输入单据编号" v-model="queryParam.number"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :md="6" :sm="24">
                                <a-form-item label="商品信息" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                    <a-input placeholder="请输入条码、名称、规格、型号、颜色、扩展信息"
                                        v-model="queryParam.materialParam"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :md="6" :sm="24">
                                <a-form-item label="单据日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                    <a-range-picker style="width: 100%" v-model="queryParam.createTimeRange"
                                        format="YYYY-MM-DD" :placeholder="['开始时间', '结束时间']" @change="onDateChange"
                                        @ok="onDateOk" />
                                </a-form-item>
                            </a-col>
                            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                                <a-col :md="6" :sm="24">
                                    <a-button type="primary" @click="searchQuery">查询</a-button>
                                    <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
                                    <a @click="handleToggleSearch" style="margin-left: 8px">
                                        {{ toggleSearchStatus ? '收起' : '展开' }}
                                        <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                                    </a>
                                </a-col>
                            </span>
                            <template v-if="toggleSearchStatus">
                                <a-col :md="6" :sm="24">
                                    <a-form-item label="会员卡号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                        <a-select placeholder="选择会员卡号" showSearch optionFilterProp="children"
                                            v-model="queryParam.organId">
                                            <a-select-option v-for="(item, index) in retailList" :key="index"
                                                :value="item.id">
                                                {{ item.supplier }}
                                            </a-select-option>
                                        </a-select>
                                    </a-form-item>
                                </a-col>
                                <a-col :md="6" :sm="24">
                                    <a-form-item label="仓库名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                        <a-select placeholder="请选择仓库" showSearch optionFilterProp="children"
                                            v-model="queryParam.depotId">
                                            <a-select-option v-for="(depot, index) in depotList" :key="index"
                                                :value="depot.id">
                                                {{ depot.depotName }}
                                            </a-select-option>
                                        </a-select>
                                    </a-form-item>
                                </a-col>
                                <a-col :md="6" :sm="24">
                                    <a-form-item label="操作员" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                        <a-select placeholder="选择操作员" showSearch optionFilterProp="children"
                                            v-model="queryParam.creator">
                                            <a-select-option v-for="(item, index) in userList" :key="index"
                                                :value="item.id">
                                                {{ item.userName }}
                                            </a-select-option>
                                        </a-select>
                                    </a-form-item>
                                </a-col>
                                <a-col :md="6" :sm="24">
                                    <a-form-item label="结算账户" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                        <a-select placeholder="选择结算账户" showSearch optionFilterProp="children"
                                            v-model="queryParam.accountId">
                                            <a-select-option v-for="(item, index) in accountList" :key="index"
                                                :value="item.id">
                                                {{ item.name }}
                                            </a-select-option>
                                        </a-select>
                                    </a-form-item>
                                </a-col>
                                <a-col :md="6" :sm="24">
                                    <a-form-item label="单据状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                        <a-select placeholder="选择单据状态" v-model="queryParam.status">
                                            <a-select-option value="0">未审核</a-select-option>
                                            <a-select-option value="1">已审核</a-select-option>
                                        </a-select>
                                    </a-form-item>
                                </a-col>
                                <a-col :md="6" :sm="24">
                                    <a-form-item label="支付类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                        <a-select placeholder="选择支付类型" v-model="queryParam.payType">
                                            <a-select-option value="扫码支付">扫码支付</a-select-option>
                                            <a-select-option value="预付款">预付款</a-select-option>
                                            <a-select-option value="刷卡支付">刷卡支付</a-select-option>
                                            <a-select-option value="现付">现付</a-select-option>
                                        </a-select>
                                    </a-form-item>
                                </a-col>
                                <a-col :md="6" :sm="24">
                                    <a-form-item label="单据备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                        <a-input placeholder="请输入单据备注" v-model="queryParam.remark"></a-input>
                                    </a-form-item>
                                </a-col>
                                <a-col :md="6" :sm="24">
                                    <a-form-item label="交易流水号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                        <a-input placeholder="请输入交易流水号" v-model="queryParam.tradeNo"></a-input>
                                    </a-form-item>
                                </a-col>
                            </template>
                        </a-row>
                    </a-form>
                </div>
                <!-- 操作按钮区域 -->
                <div class="table-operator" style="margin-top: 5px">
                    <a-button v-if="btnEnableList.indexOf(1) > -1" @click="myHandleAdd" type="primary"
                        icon="plus">新增</a-button>
                    <!-- <a-button v-if="isShowExcel" type="primary" icon="download" @click="handleExport">导出</a-button> -->
                    <a-button type="primary" icon="download" @click="handleExportXlsDetails('零售出库')">导出</a-button>
                    <a-button type="primary" icon="download" @click="handleExportXls('零售出库明细')">导出明细</a-button>
                    <a-dropdown>
                        <a-menu slot="overlay">
                            <a-menu-item key="1" v-if="btnEnableList.indexOf(1) > -1" @click="batchDel"><a-icon
                                    type="delete" />删除</a-menu-item>
                            <a-menu-item key="2" v-if="checkFlag && btnEnableList.indexOf(2) > -1"
                                @click="batchSetStatus(1)"><a-icon type="check" />审核</a-menu-item>
                            <a-menu-item key="3" v-if="checkFlag && btnEnableList.indexOf(7) > -1"
                                @click="batchSetStatus(0)"><a-icon type="stop" />反审核</a-menu-item>
                        </a-menu>
                        <a-button> 批量操作 <a-icon type="down" /> </a-button>
                    </a-dropdown>
                    <a-popover trigger="click" placement="right">
                        <template slot="content">
                            <a-checkbox-group @change="onColChange" v-model="settingDataIndex"
                                :defaultValue="settingDataIndex">
                                <a-row style="width: 500px">
                                    <template v-for="(item, index) in defColumns">
                                        <template>
                                            <a-col :span="8">
                                                <a-checkbox :value="item.dataIndex">
                                                    <j-ellipsis :value="item.title" :length="10"></j-ellipsis>
                                                </a-checkbox>
                                            </a-col>
                                        </template>
                                    </template>
                                </a-row>
                                <a-row style="padding-top: 10px">
                                    <a-col>
                                        恢复默认列配置：<a-button @click="handleRestDefault" type="link"
                                            size="small">恢复默认</a-button>
                                    </a-col>
                                </a-row>
                            </a-checkbox-group>
                        </template>
                        <a-button icon="setting">列设置</a-button>
                    </a-popover>
                    <a-tooltip placement="left" title="用于非会员和会员的单据录入，主要是用于散户使用，不能欠款。" slot="action">
                        <a-icon v-if="btnEnableList.indexOf(1) > -1" type="question-circle"
                            style="font-size: 20px; float: right" />
                    </a-tooltip>
                </div>
                <!-- table区域-begin -->
                <div>
                    <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
                        :components="handleDrag(columns)" :pagination="ipagination" :scroll="scroll" :loading="loading"
                        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                        @change="handleTableChange" :rowClassName="setRowClass">
                        <span slot="action" slot-scope="text, record">
                            <a v-if="
                  record.payStatus == '0' &&
                  record.payType == '预付款' &&
                  record.changeAmount - record.otherMoney - record.yfkMoney > 0
                " @click="onPayMoney(record)">支付</a>
                            <a v-if="record.payStatus == '0' && record.payType == '扫码支付'"
                                @click="onPayMoney(record)">支付</a>

                            <a-divider type="vertical" />
                            <a @click="onPrint(record)">小票</a>
                            <a-divider v-if="btnEnableList.indexOf(1) > -1" type="vertical" />
                            <a @click="myHandleDetail(record, '零售出库', prefixNo)">查看</a>
                            <a-divider v-if="btnEnableList.indexOf(1) > -1" type="vertical" />
                            <a v-if="btnEnableList.indexOf(1) > -1" @click="myHandleEdit(record)">编辑</a>
                            <a-divider v-if="btnEnableList.indexOf(1) > -1" type="vertical" />
                            <a v-if="btnEnableList.indexOf(1) > -1 && record.payStatus == '0' && record.payType == '扫码支付'"
                                @click="myHandleCopyAdd(record)">复制</a>
                            <a-divider
                                v-if="btnEnableList.indexOf(1) > -1 && record.payStatus == '0' && record.payType == '扫码支付'"
                                type="vertical" />
                            <a-popconfirm v-if="btnEnableList.indexOf(1) > -1 && record.payStatus == '0'" title="确定删除吗?"
                                @confirm="() => myHandleDelete(record)">
                                <a>删除</a>
                            </a-popconfirm>
                        </span>

                        <template slot="customRenderTradeStatus" slot-scope="payStatus, record">
                            <a-tag v-if="payStatus == '0' && record.payType == '扫码支付'" color="red"
                                @click="onPayMoney(record)">未支付</a-tag>
                            <a-tag v-if="
                  payStatus == '0' &&
                  record.payType == '预付款' &&
                  record.changeAmount - record.otherMoney - record.yfkMoney > 0
                " color="red" @click="onPayMoney(record)">未支付</a-tag>
                            <a-tag v-if="payStatus == '1' && record.payType == '扫码支付'" color="green">扫码支付</a-tag>
                            <a-tag v-if="record.payType != '扫码支付'" color="blue">{{ record.payType }}</a-tag>
                        </template>

                        <template slot="customRenderStatus" slot-scope="status">
                            <a-tag v-if="status == '0'" color="red">未审核</a-tag>
                            <a-tag v-if="status == '1'" color="green">已审核</a-tag>
                            <a-tag v-if="status == '9'" color="orange">审核中</a-tag>
                        </template>
                    </a-table>
                </div>
                <!-- table区域-end -->
                <!-- 表单区域 -->
                <retail-out-modal ref="modalForm" @ok="modalFormOk" @close="modalFormClose"></retail-out-modal>
                <bill-detail ref="modalDetail" @ok="modalFormOk" @close="modalFormClose"></bill-detail>
                <bill-excel-iframe ref="billExcelIframe" @ok="modalFormOk" @close="modalFormClose"></bill-excel-iframe>

                <a-modal :visible="payModal" title="支付" @ok="handleCancelPay" @cancel="handleCancelPay"
                    :maskClosable="false">
                    <template slot="footer">
                        <a-button v-show="payState == 1" type="danger" key="back" @click="handleCancelPay"> 取消支付
                        </a-button>
                    </template>
                    <div style="font-size: 32px; text-align: center; color: #18af18">支付金额：{{ payForm.money }}</div>
                    <div style="line-height: 60px; text-align: center">请出示付款码（微信/支付宝），扫码支付</div>
                    <div style="width: 100%; text-align: center; position: relative">
                        <img @click="focusInput" v-show="payState == 1 || payState == 2" src="../../assets/payImg.png"
                            style="width: 200px; height: 200px" alt="" />
                        <div v-show="payState == 2" class="pay-model">支付中，请勿关闭</div>
                        <img v-show="payState == 3" @click="focusInput" src="../../assets/paySuccess.png"
                            style="width: 200px; height: 200px" alt="" />
                    </div>
                    <a-input style="z-index: -1" ref="ainput" @pressEnter="payAuthCode" placeholder="请输入条码"
                        v-model="payForm.authCode" />
                </a-modal>
            </a-card>
        </a-col>
    </a-row>
</template>
<!-- create ji sheng hua-->
<script>
import RetailOutModal from './modules/RetailOutModal'
import BillDetail from './dialog/BillDetail'
import BillExcelIframe from '@/components/tools/BillExcelIframe'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { BillListMixin } from './mixins/BillListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import JDate from '@/components/jeecg/JDate'
import Vue from 'vue'
import { findBillDetailByNumber, microPay, ysPay } from '@/api/api'
import { getMpListShort } from '@/utils/util'
import { getAction, postAction } from '@/api/manage'
export default {
    name: 'RetailOutList',
    mixins: [JeecgListMixin, BillListMixin],
    components: {
        RetailOutModal,
        BillDetail,
        BillExcelIframe,
        JEllipsis,
        JDate,
    },
    data() {
        return {
            // 查询条件
            queryParam: {
                number: '',
                materialParam: '',
                type: '出库',
                subType: '零售',
                roleType: Vue.ls.get('roleType'),
                organId: '',
                depotId: '',
                creator: '',
                accountId: '',
                status: '',
                remark: '',
                payType: '',
                tradeNo: '',
            },
            prefixNo: 'LSCK',
            labelCol: {
                span: 5,
            },
            wrapperCol: {
                span: 18,
                offset: 1,
            },
            // 默认索引
            defDataIndex: [
                'action',
                'organName',
                'number',
                'materialsList',
                'operTimeStr',
                'userName',
                'materialCount',
                'totalPrice',
                'getAmount',
                'backAmount',
                'payStatus',
                'status',
            ],
            // 默认列
            defColumns: [
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: 'center',
                    width: 180,
                    scopedSlots: { customRender: 'action' },
                },
                { title: '会员', dataIndex: 'organName', width: 120, ellipsis: true },
                {
                    title: '单据编号',
                    dataIndex: 'number',
                    width: 160,
                    customRender: function (text, record, index) {
                        text = record.hasBackFlag ? text + '[退]' : text
                        return text
                    },
                },
                { title: '商品信息', dataIndex: 'materialsList', width: 220, ellipsis: true },
                { title: '单据日期', dataIndex: 'operTimeStr', width: 145 },
                { title: '收款类型', dataIndex: 'payType', width: 80 },
                { title: '操作员', dataIndex: 'userName', width: 80, ellipsis: true },
                { title: '数量', dataIndex: 'materialCount', width: 60 },
                { title: '金额合计', dataIndex: 'totalPrice', width: 80 },
                {
                    title: '收款金额',
                    dataIndex: 'getAmount',
                    width: 80,
                    customRender: function (text, record, index) {
                        let txtMoney = ''
                        if (record.backAmount) {
                            txtMoney =
                                (record.changeAmount + record.backAmount - record.otherMoney - record.yfkMoney).toFixed(
                                    2
                                ) +
                                (record.otherMoney ? '\n +(现金:' + record.otherMoney + ')' : '') +
                                (record.yfkMoney ? '\n (预付:' + record.yfkMoney + ')' : '')
                        } else {
                            txtMoney =
                                (record.changeAmount - record.otherMoney - record.yfkMoney).toFixed(2) +
                                (record.otherMoney ? '\n (现金:' + record.otherMoney + ')' : '') +
                                (record.yfkMoney ? '\n (预付:' + record.yfkMoney + ')' : '')
                        }
                        return <span style="white-space: pre-line;">{txtMoney}</span>
                    },
                },
                { title: '找零', dataIndex: 'backAmount', width: 50 },
                { title: '收款账户', dataIndex: 'accountName', width: 80 },
                { title: '备注', dataIndex: 'remark', width: 200 },

                {
                    title: '支付状态',
                    dataIndex: 'payStatus',
                    width: 80,
                    align: 'center',
                    scopedSlots: { customRender: 'customRenderTradeStatus' },
                },
                {
                    title: '状态',
                    dataIndex: 'status',
                    width: 80,
                    align: 'center',
                    scopedSlots: { customRender: 'customRenderStatus' },
                },
            ],
            url: {
                list: '/depotHead/list',
                delete: '/depotHead/delete',
                deleteBatch: '/depotHead/deleteBatch',
                batchSetStatusUrl: '/depotHead/batchSetStatus',
                exportXlsUrl: '/depotHead/depotHeadDDExportExcel',
            },
            model: {},
            printDataSource: '',
            payModal: false,
            payForm: {
                money: '',
                authCode: '',
                outTradeNo: '',
            },
            payState: 1,
            tradeNo: '',
        }
    },
    computed: {},
    created() {
        this.initSystemConfig()
        this.initRetail()
        this.getDepotData()
        this.initUser()
        this.initAccount()
    },
    methods: {
        setRowClass(record) {
            if (record.payStatus == '0' && record.payType == '扫码支付') {
                return 'redClass'
            } else {
                return
            }
        },
        // 零售出库小票打印
        onPrint(record) {
            this.orderGetDetailList(record)
        },

        onPayMoney(record) {
            this.payState = 1
            this.payForm.authCode = ''
            this.payForm.outTradeNo = record.number
            if (record.backAmount) {
                this.payForm.money = (
                    record.changeAmount +
                    record.backAmount -
                    record.otherMoney -
                    record.yfkMoney
                ).toFixed(2)
            } else {
                this.payForm.money = (record.changeAmount - record.otherMoney - record.yfkMoney).toFixed(2)
            }

            if (this.payForm.money == '0' || this.payForm.money == '0.00') {
                this.$message.error('扫码支付，收款金额不能为0！！！')
                return
            }

            postAction('/depotHead/batchSetStatus', {
                ids: record.id,
                status: 1,
            }).then((res) => {
                this.payModal = true
                this.focusInput()
            })
        },
        handleCancelPay() {
            this.searchQuery()
            this.payModal = false
        },
        focusInput() {
            this.$nextTick(() => {
                this.$refs.ainput.focus()
            })
        },
        handleExportXlsDetails() {
            this.url.exportXlsUrl = '/depotHead/saleExportExcel'
            this.handleExportXls('零售出库')
            this.url.exportXlsUrl = '/depotHead/depotHeadDDExportExcel'
        },
        payAuthCode() {
            this.payState = 2
            microPay(this.payForm).then((res) => {
                if (res.code == '12500002') {
                    this.payForm.authCode = ''
                    this.$message.error(res.data.msg)
                    this.payState = 1
                } else if (res.data.trade_status == 'TRADE_SUCCESS') {
                    // 支付成功
                    this.payState = 3
                    setTimeout(() => {
                        this.payModal = false
                        this.searchQuery()
                    }, 1200)
                } else if (res.data.trade_status == 'TRADE_PROCESS') {
                    // 支付中
                    this.tradeNo = res.data.trade_no
                    setTimeout(() => {
                        this.cyclePay()
                    }, 1000)
                } else {
                    // 支付异常
                    this.$message.error(res.data.msg)
                    setTimeout(() => {
                        this.payModal = false
                    }, 1000)
                }
            })
        },
        cyclePay() {
            ysPay({ tradeNo: this.tradeNo }).then((res) => {
                if (res.data.trade_status == 'TRADE_SUCCESS') {
                    // 支付成功
                    this.payState = 3
                    setTimeout(() => {
                        this.payModal = false
                        this.searchQuery()
                    }, 1200)
                } else if (res.data.trade_status == 'TRADE_PROCESS') {
                    // 支付中
                    setTimeout(() => {
                        this.cyclePay()
                    }, 1000)
                } else {
                    // 支付异常
                    this.$message.error(res.data.msg)
                    setTimeout(() => {
                        this.payModal = false
                    }, 1000)
                }
            })
        },

        orderGetDetailList(record) {
            findBillDetailByNumber({ number: record.number }).then((res) => {
                if (res && res.code === 200) {
                    let item = res.data
                    this.model = Object.assign({}, item)
                    if (this.model.backAmount) {
                        this.model.getAmount = (
                            this.model.changeAmount +
                            this.model.backAmount -
                            this.model.otherMoney
                        ).toFixed(2)
                    } else {
                        this.model.getAmount = (this.model.changeAmount - this.model.otherMoney).toFixed(2)
                    }
                    this.model.debt = (
                        this.model.discountLastMoney +
                        this.model.otherMoney -
                        (this.model.deposit + this.model.changeAmount)
                    ).toFixed(2)

                    let showType = 'basic'
                    if (item.status === '3') {
                        showType = 'basic'
                    } else if (item.purchaseStatus === '3') {
                        showType = 'purchase'
                    }
                    let params = {
                        headerId: this.model.id,
                        mpList: getMpListShort(Vue.ls.get('materialPropertyList')), //扩展属性
                        linkType: showType,
                        isReadOnly: '1',
                    }
                    let url = '/depotItem/getDetailList'
                    this.requestSubTableData(item, '出库', url, params)
                }
            })
        },

        requestSubTableData(record, type, url, params, success) {
            getAction(url, params)
                .then((res) => {
                    if (res && res.code === 200) {
                        this.printDataSource = res.data.rows
                        this.onPrintEnd()
                    }
                })
                .finally(() => {
                    this.loading = false
                })
        },
        onPrintEnd() {
            let txt = ''
            this.printDataSource.map((value) => {
                if (value.barCode) {
                    txt += `<div class="print_content print_fontSmall">
    			<div class="print_widthBig print_paddingLeft">${value.name}</div>
    			<div class="print_widthSmall print_center">${value.operNumber}</div>
    			<div class="print_widthSmall print_center">${value.allPrice}</div>
    		</div>`
                }
            })
            // 将打印页面设置为内框架内容
            const newIframe = document.createElement('iframe')
            newIframe.setAttribute('style', 'width:0px;height:0px;position:absolute;left:-9999px;top:-9999px;')
            newIframe.setAttribute('align', 'center')
            document.body.appendChild(newIframe)
            let doc = null
            doc = newIframe.contentWindow.document
            doc.write(`
      <style type="text/css">
        /* 浏览器打印基本样式 */
        @media print {
          @page {
            size: auto;
            margin: 0mm; /* 影响打印小票的边缘margin */
            table { page-break-after: auto; }
            tr    { page-break-inside: avoid; page-break-after: auto; }
            td    { page-break-inside: avoid; page-break-after: auto; }
            thead { display: table-header-group; }
            tfoot { display: table-footer-group; }
          }
        }
        /* 打印页面样式 */
    .print_box {width: 100%;height: auto;margin: 0px auto;font-size: 10px;line-height: 16px;}
    .print_title {width: 100%;text-align: center;font-size: 14px;font-weight: bold;line-height: 24px;}
    .print_content {width: 100%;display: flex;}
    .print_widthBig {width: 60%;}
    .print_widthSmall {width: 20%;}
    .print_fontSmall{font-size: 8px;}
    .print_paddingLeft{padding-left: 2px;}
    .print_foot {display: flex;justify-content: space-between;}
    .print_center {text-align: center;}
    .divide_line {justify-content: center;border-bottom: 1px dashed rgba(51, 51, 51, 1);}
        /* 打印页面样式，一个class一个class写，可以.classA .classB {}, 但不要嵌套，不要.classA { .classB {} } */
      </style>
      <div class="print_box">
    		<div class="print_title">小贰家</div>
    		<div class="divide_line"></div>
    		<div>单据编号:${this.model.number}</div>
    		<div>单据时间:${this.model.operTimeStr}</div>
    		<div class="divide_line"></div>
    		<div class="print_content">
    			<div class="print_widthBig print_center">品名</div>
    			<div class="print_widthSmall print_center">数量</div>
    			<div class="print_widthSmall print_center">小计</div>
    		</div>
    		<div class="divide_line"></div>
        ${txt}
    		<div class="divide_line"></div>
    		<div class="print_foot">
    			<div>单据金额:${this.model.changeAmount}</div>
    		</div>
    		<div class="print_foot">
    			<div>收款金额:${this.model.getAmount}</div>
    		</div>
    		<div class="divide_line"></div>
    		<div style="text-align: center;line-height: 24px;">该票为购物凭证，请妥善保存！</div>
    	</div>
      </div>`)
            doc.close()
            // 浏览器打印页面打开渲染
            setTimeout(() => {
                newIframe.contentWindow.focus()
                newIframe.contentWindow.print()
                document.body.removeChild(newIframe) // 移除打印内框架，下次打印下次再挂载
            }, 10)
        },
    },
}
</script>
<style scoped>
@import '~@assets/less/common.less';

.pay-model {
    position: absolute;
    width: 100%;
    height: 200px;
    left: 0;
    top: 0;
    background: rgb(0, 0, 0, 0.3);
    color: #fff;
    font-size: 20px;
    line-height: 200px;
    z-index: 10;
}

>>> .redClass {
    color: #ff0000 !important;
}
</style>